<!--suppress ALL -->
<include file="./Template/header.html" />
<link rel="stylesheet" type="text/css" href="/Template/css/orderInfo.css">
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		initPage("订单详情");

		var app = new Vue({
			el: '#container',
			data: {
				info: [],
			},
			methods: {
				editInfo: function() {
					window.location.href = "/wechat/userCenter/myInfo";
				},
				myOrder: function() {
					window.location.href = "/wechat/userCenter/myOrder?status=0";
				},
				goPay: function() {
					callpay();
				},
				measureInfo: function (id) {
					window.location.href = "/wechat/order/measureInfo/id/"+id;
				}
			}
		})

		<if condition="$info['status'] eq -1">
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '{$appId}', // 必填，公众号的唯一标识
			timestamp: '{$config.timestamp}', // 必填，生成签名的时间戳
			nonceStr: '{$config.noncestr}', // 必填，生成签名的随机串
			signature: '{$config.signature}', // 必填，签名，见附录1
			jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});

		wx.ready(function(){});

		function callpay(){
			if (typeof WeixinJSBridge == "undefined"){
				if( document.addEventListener ){
					alert("必须在微信中支付");
					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				}else if (document.attachEvent){
					alert("必须在微信中支付2");
					document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				}
			}else{
				onBridgeReady();
			}
		}

		function onBridgeReady(){
			wx.chooseWXPay({
				timestamp: "{$webarr.timeStamp}", // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
				nonceStr: "{$webarr.nonceStr}", // 支付签名随机串，不长于 32 位
				package: "{$webarr.package}", // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
				signType: "{$webarr.signType}", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
				paySign: "{$webarr.paySign}", // 支付签名
				success: function (res) {
					// 支付成功后的回调函数
					alert('恭喜您支付成功');
					window.location.reload();
				}
			});
		}
		</if>

	});


</script>
<div class="container" id="container">
	<div class="header">
		<if condition="$info['status'] eq -1">
			<div class="active not-paid">
				<p class="status">待付款</p>
				<img class="wallet" src="/Template/images/icon-wallet.png" alt="wallet">
			</div>
		<elseif condition="$info['status'] eq 1"/>
			<div class="active have-paid">
				<p class="status">处理中。。。</p>
				<img class="clock" src="/Template/images/icon-clock.png" alt="clock">
			</div>
		<elseif condition="$info['status'] eq 2"/>
			<div class="active have-transport">
				<p class="status">商品已出库</p>
				<img class="car" src="/Template/images/icon-car.png" alt="car">
			</div>
		</if>

	</div>
	<if condition="$info['status'] eq 2">
		<div class="express-info active">
			<img class="greencar" src="/Template/images/icon-greencar.png" alt="transport">
			<span class="sign-info">{$info.express_company}-运单号:{$info.delivery_number}</span>
		</div>
	</if>

	<div class="user-info">
		<p class="user-name">收货人：{$info.receive_name}</p>
		<p class="phone-number">{$info.receive_contact}</p>
		<div class="address">
			<img class="set-position" src="/Template/images/icon-position.png" alt="position">
			<span class="sign-address">收货地址: {$info.receive_address}</span>
		</div>
	</div>
	<div class="product-detail">
		<img class="product-img" src="{$info.image_url}" alt="product">
		<div class="detail-info">
			<p class="product-price">￥{$info.single_price}</p>
			<p class="product-name">{$info.product_name}</p>
			<p class="number">×{$info.number}</p>
			<p class="buy-time">订购日期：{$info.create_time}</p>
		</div>
	</div>
	<div class="price">
		<p class="basic info way-to-transport">配送方式 <span>{$info.delivery_type}</span></p>
		<div class="line"></div>
		<if condition="$info['need_measure'] eq 1">
			<p class="basic measure-info" v-on:click="measureInfo({$info.order_id})">测量信息 <span>查看 <img class="measure-view" src="/Template/images/icon-right.png" alt=""></span></p>
			<div class="line"></div>
		</if>
		<p class="basic messege">留言备注 <span>{$info.note}</span></p>
		<div class="line"></div>
		<if condition="$info['need_invoice'] eq 1">
			<p class="basic invoice-title">发票抬头：<span>{$info.invoice_name}</span></p>
			<div class="line"></div>
		</if>
		<p class="cash-number">共{$info.number}件商品 合计：<span>￥{$info.price}</span></p>
	</div>
	<div class="order-info">
		<if condition="$info['status'] neq -1">
			<p class="item order-number">订单编号：{$pay.out_trade_no}</p>
		</if>
		<p class="item creat-time">创建时间：{$info.create_time}</p>
		<if condition="$info['status'] neq -1">
			<p class="item paid-time">付款时间：{$info.pay_time}</p>
		</if>
		<if condition="$info['status'] eq 2">
			<p class="item transport-time">发货时间：{$info.outstock_time}</p>
		</if>

	</div>
	<if condition="$info['status'] eq -1">
		<div class="active order-operation">
			<div class="pay-btn" v-on:click="goPay">立即支付</div>
		</div>
	</if>
</div>

<include file="./Template/footer.html" />

